import React from "react";
import styles from "./index.less";
import { Table, Card, Row, Col, Input, Button, Divider, Switch,message,Space,Modal,Select,Collapse, Icon,Tag,DatePicker   } from "antd";
import Link from "umi/link";
import { myTask} from "@/services/myTaskCenter";

const { Option, OptGroup } = Select;
const { Panel } = Collapse;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const DescriptionItem = ({ title, content }) => (
  <div
    style={{
      fontSize: 14,
      lineHeight: '22px',
      marginBottom: 7,
      color: 'rgba(0,0,0,0.65)',
    }}
  >
    <p
      style={{
        marginRight: 8,
        display: 'inline-block',
        color: 'rgba(0,0,0,0.85)',
      }}
    >
      {title}:
    </p>
    {content}
  </div>
);

const customPanelStyle = {
  background: '#f7f7f7',
  borderRadius: 4,
  marginBottom: 24,
  border: 0,
  overflow: 'hidden',
};

class App extends React.Component {
  state = {
    data: [],
    pagination: {},
  };

  constructor(props) {
    super(props);   
  }

  componentDidMount() {
    this.fetch().catch(res => {
      console.error(res);
    });
  }

  
  fetch = async (params = {}) => {

    this.setState({ loading: true });
    const response = await myTask();

    console.log(response.data)

    this.setState({myTaskList:response.data})
  };

   onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  }
  
   onOk(value) {
    console.log('onOk: ', value);
  }


  render() {

    return (
      <Row gutter={[16, 16]}>
        <Row>
          <Collapse
            bordered={false}
            expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
          >
            {this.state.myTaskList && this.state.myTaskList.map((item,index)=>{
            return (<Panel header={<div><span style={{marginRight:'10px'}}>{item.task.title+'---'+item.task_info.taskDesc}</span><Tag color="#f50">待完成</Tag></div>} key={index} style={customPanelStyle}>
                <Row style={{marginLeft:'24px'}}>
                  <Row>
                    <Col span={12}>
                      <DescriptionItem title="描述" content={item.task_info.taskDesc} />
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <DescriptionItem title="时间节点" content="6月10日 下午" />
                    </Col>
                  </Row>
                  <Row>
                    <Col span={4}>
                      <DescriptionItem title="服务经理" content={item.task_info.manager} />
                    </Col>
                    <Col span={8}>
                      <DescriptionItem title="WPL" content={item.task.wpl} />
                    </Col>
                  </Row>

                  <Row>
                    <Col span={2}>
                      <Button type="primary" >开始</Button>
                    </Col>
                  </Row>
                  

                </Row>
              </Panel>)
            })}
            
            {/* <Panel header={<div><span style={{marginRight:'10px'}}>波兰电池一口价更改需求</span><Tag color="#87d068">已完成</Tag></div>} key="2" style={customPanelStyle}>
            <Row style={{marginLeft:'24px'}}>
                <Row>
                  <Col span={12}>
                    <DescriptionItem title="描述" content="官网内容更新" />
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <DescriptionItem title="时间节点" content="6月10日 下午" />
                  </Col>
                </Row>
                <Row>
                  <Col span={4}>
                    <DescriptionItem title="服务经理" content="尹帆" />
                  </Col>
                  <Col span={8}>
                    <DescriptionItem title="WPL" content="曲婉宁" />
                  </Col>
                </Row>

                <Row>
                  <Col span={2}>
                  <DescriptionItem title="开始时间" content="" />
                  </Col>
                  <Col>
                      <DatePicker showTime placeholder="开始时间" onChange={this.onChange} onOk={this.onOk} />
                  </Col>
                </Row>

                <Row>
                  <Col span={2}>
                  <DescriptionItem title="完成时间" content="" />
                  </Col>
                  <Col>
                      <DatePicker showTime placeholder="完成时间" onChange={this.onChange} onOk={this.onOk} />
                  </Col>
                </Row>

                <Row>
                  <Col span={2}>
                  <DescriptionItem title="工时" content="" />
                  </Col>
                  <Col span={2}>
                    <Input placeholder="default size" defaultValue={'0.5'} addonAfter="天" />
                  </Col>
                </Row>
              </Row>
            </Panel>
            <Panel header={<div><span style={{marginRight:'10px'}}>阿联酋电池一口价页面制作</span><Tag color="#87d068">已完成</Tag></div>} key="3" style={customPanelStyle}>
            <Row style={{marginLeft:'24px'}}>
                <Row>
                  <Col span={12}>
                    <DescriptionItem title="描述" content="官网内容更新" />
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <DescriptionItem title="时间节点" content="6月10日 下午" />
                  </Col>
                </Row>
                <Row>
                  <Col span={4}>
                    <DescriptionItem title="服务经理" content="尹帆" />
                  </Col>
                  <Col span={8}>
                    <DescriptionItem title="WPL" content="曲婉宁" />
                  </Col>
                </Row>
              </Row>
            </Panel> */}
          </Collapse>
        </Row>
      </Row>
    );
  }
}

export default () => (
  <div className={styles.container}>
    <div id="components-table-demo-ajax">
      <App />
    </div>
  </div>
);
